<template>
  <div>
    <el-dialog title="审核人" :visible.sync="dialogVisible" :close-on-press-escape="false" :show-close="false" :close-on-click-modal="false" width="80%">
      <el-row :gutter="20" type="flex" justify="center" align="middle">
        <el-col :span="10">
          <el-tabs v-model="editableTabsValue" type="border-card" style="height: 400px;" @tab-click="tabClick">
            <el-tab-pane :key="item.name" v-for="item in editableTabs" :label="item.title" :name="item.name" lazy>
              <div style="display: flex;" v-show="item.name === 'user' || item.name === 'role'">
                <div style="flex: 1;margin-right: 10px;margin-bottom: 10px;">
                  <el-input v-model="item.input" :placeholder="item.placeholder" size="mini"></el-input>
                </div>
                <div>
                  <el-button size="mini">搜索</el-button>
                </div>
              </div>
              <el-table :data="item[item.name]" border size="mini" v-show="item.name === 'user' || item.name === 'role'" max-height="297" :ref="`multipleTable${item.name}`" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column :prop="k" :label="v" v-for="(v, k) in item.tableHeader" :key="k"></el-table-column>
              </el-table>
              <!-- 动态变量 -->
              <el-checkbox-group v-model="checkList" v-show="item.name === 'other'">
                <div style="margin-bottom: 6px;" v-for="(item, index) in item.checkboxList" :key="index">
                  <el-checkbox :label="item.name"></el-checkbox>
                </div>
              </el-checkbox-group>
              <!-- 部门 -->
              <div v-show="item.name === 'dept'">
                <div style="margin-bottom: 6px;display: flex;align-items: center;">
                  <span v-for="(v, i) in item.deptObj ? item.deptObj.deptPath : []" :key="i" style="cursor: pointer;display: flex;align-items: center;">
                    <span style="margin-right: 6px;" @click="getChildrenDept(v)">{{ v.name }}</span>
                    <span style="margin-right: 6px;" v-show="i === 0 && i !== item.deptObj.deptPath.length - 1">|</span>
                    <span style="margin-right: 6px;" v-show="i !== 0 && i !== item.deptObj.deptPath.length - 1">&gt;</span>
                  </span>
                </div>
                <el-checkbox-group v-model="deptCheckList" @change="handleCheckedChange">
                  <el-checkbox :label="v.name" v-for="(v, i) in item.deptObj ? item.deptObj.deptDetail : []" :key="i">
                    <span @click="getChildrenGroup($event, v)">{{ v.name }}</span>
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;">
            <!-- <i class="el-icon-d-arrow-right" style="color: rgba(251, 15, 3, 1);font-size: 26px;cursor: pointer;" @click="setCheckData"></i> -->
            <el-button type="primary" icon="el-icon-arrow-right" @click="setCheckData" :disabled="(editableTabsValue === 'user' && this.selectedItems[editableTabsValue].length === 0) || (editableTabsValue === 'dept' && this.deptCheckList.length === 0) || (editableTabsValue === 'role' && this.selectedItems[editableTabsValue].length === 0) || (editableTabsValue === 'other' && checkList.length === 0)"></el-button>
          </div>
        </el-col>
        <el-col :span="10">
          <div style="border: 1px solid #DCDFE6;box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);height: 400px;padding: 15px;overflow: auto;">
            <div v-show="checkDataObj['user'].length === 0 && checkDataObj['dept'].length === 0 && checkDataObj['role'].length === 0 && checkDataObj['other'].length === 0" style="height: 100%;display: flex;justify-content: center;align-items: center;">
              <span>暂未配置</span>
            </div>
            <div v-show="checkDataObj['user'].length !== 0 || checkDataObj['dept'].length !== 0 || checkDataObj['role'].length !== 0 || checkDataObj['other'].length !== 0">
              <div>
                <div v-show="checkDataObj['user'].length !== 0">
                  <div style="font-weight: bold;margin-bottom: 10px;">人员({{ checkDataObj['user'].length }})</div>
                  <div>
                    <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 6px;" v-for="(item, index) in checkDataObj['user']" :key="index">
                      <div>{{ `${item.name}/${item.dept}/${item.num}` }}</div>
                      <div style="color: #f56c6c;cursor: pointer;">
                        <i class="el-icon-delete" style="vertical-align: middle;" @click="removeCheckItem('user', index)"></i>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-show="checkDataObj['user'].length !== 0"><el-divider></el-divider></div>
                <div v-show="checkDataObj['dept'].length !== 0">
                  <div style="font-weight: bold;margin-bottom: 10px;">部门({{ checkDataObj['dept'].length }})</div>
                  <div>
                    <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 6px;" v-for="(item, index) in checkDataObj['dept']" :key="index">
                      <div>{{ `${item.desc}` }}</div>
                      <div style="color: #f56c6c;cursor: pointer;">
                        <i class="el-icon-delete" style="vertical-align: middle;" @click="removeCheckItem('dept', index)"></i>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-show="checkDataObj['dept'].length !== 0"><el-divider></el-divider></div>
                <div v-show="checkDataObj['role'].length !== 0">
                  <div style="font-weight: bold;margin-bottom: 10px;">角色({{ checkDataObj['role'].length }})</div>
                  <div>
                    <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 6px;" v-for="(item, index) in checkDataObj['role']" :key="index">
                      <div>{{ `${item.name}` }}</div>
                      <div style="color: #f56c6c;cursor: pointer;">
                        <i class="el-icon-delete" style="vertical-align: middle;" @click="removeCheckItem('role', index)"></i>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-show="checkDataObj['role'].length !== 0"><el-divider></el-divider></div>
                <div v-show="checkDataObj['other'].length !== 0">
                  <div style="font-weight: bold;margin-bottom: 10px;">动态变量({{ checkDataObj['other'].length }})</div>
                  <div>
                    <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 6px;" v-for="(item, index) in checkDataObj['other']" :key="index">
                      <div>{{ `${item.name}` }}</div>
                      <div style="color: #f56c6c;cursor: pointer;">
                        <i class="el-icon-delete" style="vertical-align: middle;" @click="removeCheckItem('other', index)"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <span slot="footer">
        <el-button @click="setDialog('cancel')">取 消</el-button>
        <el-button type="primary" @click="setDialog('confirm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ExamineDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    editableTabs: {
      type: Array,
      default: () => []
    },
    checkDataObj: {
      type: Object,
      default: () => {
        return {
          user: [],
          dept: [],
          role: [],
          other: []
        }
      }
    }
  },
  data () {
    return {
      editableTabsValue: 'user',
      checkList: [],
      deptCheckList: [],
      selectedItems: {
        user: [],
        dept: [],
        role: [],
        other: []
      }
    }
  },
  methods: {
    tabClick (tab) {
      this.$emit('tabClick', tab)
    },
    setDialog (type) {
      this.$emit('setDialog', type)
    },
    setCheckData () {
      this.$emit('setCheckData')
    },
    removeCheckItem (type, index) {
      this.$emit('removeCheckItem', type, index)
    },
    getChildrenDept (v) {
      this.$emit('getChildrenDept', v)
    },
    handleCheckedChange (value) {
      this.$emit('handleCheckedChange', value)
    },
    getChildrenGroup (e, v) {
      e.preventDefault()
      this.$emit('getChildrenGroup', v)
    },
    handleSelectionChange (val) {
      this.$set(this.selectedItems, this.editableTabsValue, val)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
